<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width:60%;
            height: 400px;
            border: 1px solid #f00;
            margin:10px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <h2>节流-时间戳</h2>
    <div class="box"> 1 </div>
</body>
<script>
    //获取box
    const box=document.querySelector('.box')

    let i=0;
    box.addEventListener('mousemove',throttle(moveFn,5000),false)

    function moveFn(e) {
       box.textContent=++i;
    }

    //节流函数
    function throttle(fn,wait) {
        //定义过去时间-上一次
        let previous=0
        
       return function() {
            //保存当前this
            const _this=this  
            //保存事件
            const args=arguments  
            
            //获取当前时间戳
            let nowTime=+new Date()

            if(nowTime-previous>wait) {
                //执行fn
                fn.apply(_this,args)
                //将本次的时间戳赋值给上一次
                previous=nowTime

            }

       }

    }
   
</script>
</html>